<template>
  <!-- 保安人员 -->
  <el-dialog title="查看计划" :visible.sync="showFurther" width="60%" :before-close="closeFurther" :close-on-click-modal="false">
    <el-form :model="formData.model" :rules="formData.rules" ref="form" label-width="150px" size="small" label-position="right">
      <el-row>
        <el-col :span="12">
          <el-form-item label="事项">
            <el-input v-model="formData.model.matter"></el-input>
          </el-form-item>
        </el-col>
        <template v-if="['保安人员费用', '保洁人员费'].includes(name)">
          <el-col :span="12">
            <el-form-item label="总成本">
              <el-input v-model="formData.model.totalCost"></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="付款方式">
              <el-input v-model="formData.model.paymentFunction"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="首次付款时间">
              <el-input v-model="formData.model.firstPaymentTime"></el-input>
            </el-form-item>
          </el-col>
        </template>
        <template v-if="!['保安人员费用', '保洁人员费'].includes(name)">
          <el-col :span="12">
            <el-form-item label="事项内容">
              <el-input v-model="formData.model.matterContent"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联设备设施">
              <el-input v-model="formData.model.relevancyFacility"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择子系统">
              <el-input v-model="formData.model.selectChildrenSystem"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择设备">
              <el-input v-model="formData.model.selectFacility"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择设施">
              <el-input v-model="formData.model.selectFacilities"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择功能分区">
              <el-input v-model="formData.model.selectFunctionSubarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择楼层">
              <el-input v-model="formData.model.selectTier"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否资本性支出">
              <el-input v-model="formData.model.isCapitalPay"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联资本性支出类型">
              <el-input v-model="formData.model.capitalPay"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开始时间">
              <el-input v-model="formData.model.startTime"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间">
              <el-input v-model="formData.model.endTime"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款时间">
              <el-input v-model="formData.model.paymentTime"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款金额">
              <el-input v-model="formData.model.paymentMoney"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款时间">
              <el-input v-model="formData.model.paymentTime1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款金额">
              <el-input v-model="formData.model.paymentMoney1"></el-input>
            </el-form-item>
          </el-col>
        </template>

        <!-- <el-col :span="24">
          <el-form-item label="附件">
            <span class="addSpan">上传附件</span>
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="提示">
            <span class="textSpan"></span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="说明">
            <el-input v-model="formData.model.shuoming" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--<el-row type="flex" :justify="'end'">
        <el-button @click="search" round> 保存 </el-button>
      </el-row>-->
    </el-form>
  </el-dialog>
</template>

<script>
import { followOpportunity, queryLastRecordDetail, RoomStateList } from '../../../../businessOpportunity/api/businessOpportunity.js';
export default {
  props: {
    showFurther: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      formData: {
        model: {
          totalCost: 0,
          paymentFunction: '',
          matter: '维修',
          matterContent: '电梯大修',
          relevancyFacility: '设备',
          selectChildrenSystem: '扶梯',
          selectFacility: '日立1200EX-NLH',
          selectFacilities: '-',
          selectFunctionSubarea: '-',
          selectTier: '-',
          isCapitalPay: '是',
          capitalPay: '设备更新、大中修',
          startTime: '2022/1/1',
          endTime: '2022/12/31',
          paymentTime: '2022/6/25',
          paymentMoney: '1,097,891',
          paymentTime1: '2022/12/25',
          paymentMoney1: '1,097,891',
        },
        rules: {
          // recordStatus: [{ required: true, message: '请选择', trigger: 'change' }],
          // source: [{ required: true, message: '请选择', trigger: 'change' }],
        },
      },
      shixiangList: [],
      fukuanList: [],
    };
  },

  watch: {
    name: {
      handler(val) {
        console.log(val);
        this.filterDate(val);
      },
      deep: true,
      immediate: true,
    },
  },

  mounted() {},
  methods: {
    filterDate(typeName) {
      if (typeName == '保安人员费用') {
        this.formData.model = {
          matter: '保安人员费用',
          totalCost: 1144800,
          paymentFunction: '3个月',
          firstPaymentTime: '2022/1/25',
        };
      }
      if (typeName == '保洁人员费') {
        this.formData.model = {
          matter: '保洁人员费',
          totalCost: 920200,
          paymentFunction: '3个月',
          firstPaymentTime: '2022/1/25',
        };
      }
      if (typeName == '电梯大修') {
        this.formData.model = {
          matter: '维修',
          matterContent: '电梯大修',
          relevancyFacility: '设备',
          selectChildrenSystem: '扶梯',
          selectFacility: '日立1200EX-NLH',
          selectFacilities: '-',
          selectFunctionSubarea: '-',
          selectTier: '-',
          isCapitalPay: '是',
          capitalPay: '设备更新、大中修',
          startTime: '2022/1/1',
          endTime: '2022/12/31',
          paymentTime: '2022/6/25',
          paymentMoney: '1,097,891',
          paymentTime1: '2022/12/25',
          paymentMoney1: '1,097,891',
        };
      }
      if (typeName === '空调保养费用') {
        this.formData.model = {
          matter: '保养',
          matterContent: '空调保养费用',
          relevancyFacility: '设备',
          selectChildrenSystem: '冷却塔',
          selectFacility: '斯频德CTA--150UFWS',
          selectFacilities: '-',
          selectFunctionSubarea: '-',
          selectTier: '-',
          isCapitalPay: '否',
          capitalPay: '-',
          startTime: '2022/1/1',
          endTime: '2022/12/31',
          paymentTime: '2022/6/25',
          paymentMoney: '335,645',
          paymentTime1: '2022/12/25',
          paymentMoney1: '335,645',
        };
      }
      if (typeName === '空气质量检测费用') {
        this.formData.model = {
          matter: '检测',
          matterContent: '空气质量检测费用',
          relevancyFacility: '设施',
          selectChildrenSystem: '-',
          selectFacility: '-',
          selectFacilities: '-',
          selectFunctionSubarea: '全部分区',
          selectTier: '-',
          isCapitalPay: '否',
          capitalPay: '-',
          startTime: '2022/1/1',
          endTime: '2022/12/31',
          paymentTime: '2022/12/25',
          paymentMoney: '171,295',
          paymentTime1: '2022/12/25',
          paymentMoney1: '171,295',
        };
      }
      if (typeName === '电梯维修设备') {
        this.formData.model = {
          matter: '维修',
          matterContent: '电梯维修设备',
          relevancyFacility: '设备',
          selectChildrenSystem: '客梯',
          selectFacility: '日立NPH-1600-C090',
          selectFacilities: '-',
          selectFunctionSubarea: '-',
          selectTier: '-',
          isCapitalPay: '否',
          capitalPay: '-',
          startTime: '2022/6/1',
          endTime: '2022/12/31',
          paymentTime: '2022/6/25',
          paymentMoney: '295,061',
          paymentTime1: '2022/12/25',
          paymentMoney1: '295,061',
        };
      }
      if (typeName === '新增设备设施') {
        this.formData.model = {
          matter: '新增',
          matterContent: '新增设备设施',
          relevancyFacility: '设施',
          selectChildrenSystem: '-',
          selectFacility: '-',
          selectFacilities: '卫生间',
          selectFunctionSubarea: '办公区',
          selectTier: '2层',
          isCapitalPay: '否',
          capitalPay: '-',
          startTime: '2022/6/1',
          endTime: '2022/12/31',
          paymentTime: '2022/6/25',
          paymentMoney: '445,360',
          paymentTime1: '2022/12/25',
          paymentMoney1: '445,360',
        };
      }
    },

    // 取消
    closeFurther() {
      this.$emit('close-dialog', false);
    },
    // 确定
    search() {
      this.$refs.form.validate(async isOK => {
        if (isOK) {
          await followOpportunity(this.formData.model);
          this.$message.success('保存成功');
          this.closeFurther();
        } else {
          return false;
        }
      });
    },
    //详情
    async queryLastRecordDetail(val) {
      const res = await queryLastRecordDetail(val);
      if (res.recordStatus) {
        this.formData.model = res;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  .el-dialog__header {
    background: #444444;
  }
}
::v-deep .el-button.is-round {
  background-color: #444444;
  color: #fff;
}
.el-col {
  height: 50px;
}
.addSpan {
  color: #33b5ff;
}
.textSpan {
  color: #bf4747;
}
</style>
